<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input
        v-model="listQuery.goodsId"
        clearable
        class="filter-item"
        :placeholder="$t('goods_list.placeholder.filter_goods_id')"
      />
      <el-input
        v-model="listQuery.name"
        clearable
        class="filter-item"
        :placeholder="$t('goods_list.placeholder.filter_name')"
      />
      <el-select
        v-model="listQuery.categoryId"
        clearable
        placeholder="所属分类"
        class="filter-item"
        @change="handleFilter"
      >
        <el-option
          v-for="item in categoryList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select
        v-model="listQuery.isNew"
        clearable
        placeholder="是否新品"
        class="filter-item"
        @change="handleFilter"
      >
        <el-option label="新品" :value="true" />
        <el-option label="非新品" :value="false" />
      </el-select>
      <el-select
        v-model="listQuery.isHot"
        clearable
        placeholder="是否热卖"
        class="filter-item"
        @change="handleFilter"
      >
        <el-option label="热卖" :value="true" />
        <el-option label="普通" :value="false" />
      </el-select>
      <el-select
        v-model="listQuery.isOnSale"
        clearable
        placeholder="是否在售"
        class="filter-item"
        @change="handleFilter"
      >
        <el-option label="在售" :value="true" />
        <el-option label="未售" :value="false" />
      </el-select>
      <el-button type="primary" icon="el-icon-search" @click="handleFilter">{{
        $t("app.button.search")
      }}</el-button>
      <el-button type="primary" icon="el-icon-plus" @click="handleCreate">{{
        $t("app.button.create")
      }}</el-button>

      <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      <el-button
        type="danger"
        icon="el-icon-delete"
        :disabled="batchDeleteArr.length === 0"
        @click="handleDeleteRows"
        >{{ $t("app.button.batch_delete") }}</el-button
      >
    </div>

    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      :element-loading-text="$t('app.message.list_loading')"
      :header-cell-style="{
        background: 'rgba(239, 241, 244, 0.2)',
        color: '#333333',
      }"
      border
      fit
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        fixed="left"
        align="center"
        type="selection"
        width="55"
      />
      <el-table-column
        align="center"
        :label="$t('goods_list.table.id')"
        prop="id"
      />

      <el-table-column
        show-overflow-tooltip
        align="center"
        min-width="100"
        :label="$t('goods_list.table.name')"
        prop="name"
      />

      <el-table-column
        align="center"
        property="iconUrl"
        :label="$t('goods_list.table.pic_url')"
      >
        <template slot-scope="scope">
          <el-image
            :src="thumbnail(scope.row.picUrl)"
            :preview-src-list="toPreview(scope.row, scope.row.picUrl)"
            style="width: 40px; height: 40px"
          />
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        :label="$t('goods_list.table.counter_price')"
        prop="counterPrice"
      />

      <el-table-column
        align="center"
        :label="$t('goods_list.table.retail_price')"
        prop="retailPrice"
      />

      <el-table-column
        align="center"
        :label="$t('goods_list.table.is_new')"
        prop="isNew"
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row.isNew ? 'success' : 'error'">{{
            $t(
              scope.row.isNew
                ? "goods_list.value.is_new_true"
                : "goods_list.value.is_new_false"
            )
          }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        :label="$t('goods_list.table.is_hot')"
        prop="isHot"
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row.isHot ? 'success' : 'error'">{{
            $t(
              scope.row.isHot
                ? "goods_list.value.is_hot_true"
                : "goods_list.value.is_hot_false"
            )
          }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        :label="$t('goods_list.table.is_on_sale')"
        prop="isOnSale"
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row.isOnSale ? 'success' : 'error'">{{
            $t(
              scope.row.isOnSale
                ? "goods_list.value.is_on_sale_true"
                : "goods_list.value.is_on_sale_false"
            )
          }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        fixed="right"
        align="center"
        :label="$t('goods_list.table.actions')"
        width="100"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button type="text" @click="handleUpdate(scope.row)">{{
            $t("app.button.edit")
          }}</el-button>
          <el-button
            type="text"
            style="color: red"
            @click="handleDelete(scope.row)"
            >{{ $t("app.button.delete") }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <el-tooltip placement="top" :content="$t('app.tooltip.back_to_top')">
      <back-to-top :visibility-height="100" />
    </el-tooltip>
  </div>
</template>

<style>
.table-expand {
  font-size: 0;
  padding-left: 60px;
}
.table-expand label {
  width: 100px;
  color: #99a9bf;
}
.table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
}
.gallery {
  width: 80px;
  margin-right: 10px;
}
.goods-detail-box img {
  width: 100%;
}
</style>

<script>
import { listGoods, deleteGoods } from "@/api/goods";
import { listCatAndBrand } from "@/api/goods";
import BackToTop from "@/components/BackToTop";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
import { thumbnail, toPreview } from "@/utils/index";

export default {
  name: "GoodsList",
  components: { BackToTop, Pagination },
  data() {
    return {
      batchDeleteArr: [],
      thumbnail,
      toPreview,
      list: [],
      total: 0,
      listLoading: true,
      categoryList: [],
      listQuery: {
        page: 1,
        limit: 20,
        goodsSn: undefined,
        name: undefined,
        categoryId: undefined,
        isNew: undefined,
        isHot: undefined,
        isOnSale: undefined,
        sort: "add_time",
        order: "desc",
      },
      goodsDetail: "",
      detailDialogVisible: false,
      downloadLoading: false,
    };
  },
  created() {
    this.getList();
    this.getCategoryList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      listGoods(this.listQuery)
        .then((response) => {
          this.list = response.data.data.list;
          this.total = response.data.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.list = [];
          this.total = 0;
          this.listLoading = false;
        });
    },
    getCategoryList() {
      listCatAndBrand().then((response) => {
        this.categoryList = response.data.data.categoryList;
      });
    },
    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },
    handleCreate() {
      this.$router.push({ path: "/goods/create" });
    },
    handleUpdate(row) {
      this.$router.push({ path: "/goods/edit", query: { id: row.id } });
    },
    showDetail(detail) {
      this.goodsDetail = detail;
      this.detailDialogVisible = true;
    },
    handleDelete(row) {
      this.$confirm("数据删除后不可恢复，是否确认删除此条数据？", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        deleteGoods(row)
          .then((response) => {
            this.$message.success({
              title: "成功",
              message: "删除成功",
            });
            this.getList();
          })
          .catch((response) => {
            this.$message.error({
              title: "失败",
              message: response.data.errmsg,
            });
          });
      });
    },
    handleSelectionChange(val) {
      console.log(val);
      this.batchDeleteArr = val;
    },
    handleDeleteRows() {
      this.$confirm("数据删除后不可恢复，是否确认删除此条数据？", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        try {
          await Promise.all(
            this.batchDeleteArr.map((row) => this.handleDeleteEachRow(row))
          );
          this.$message.success({
            title: "成功",
            message: "批量删除成功",
          });
          this.getList();
        } catch (error) {
          this.$message.error({
            title: "失败",
            message: error.data?.errmsg || "删除失败",
          });
        }
      });
    },
    handleDeleteEachRow(row) {
      return deleteGoods(row);
    },
    handleDownload() {
      this.downloadLoading = true;
      import("@/vendor/Export2Excel").then((excel) => {
        const tHeader = [
          "商品ID",
          "商品编号",
          "名称",
          "专柜价格",
          "当前价格",
          "是否新品",
          "是否热品",
          "是否在售",
          "首页主图",
          "宣传图片列表",
          "商品介绍",
          "详细介绍",
          "商品图片",
          "商品单位",
          "关键字",
          "类目ID",
          "品牌商ID",
        ];
        const filterVal = [
          "id",
          "goodsSn",
          "name",
          "counterPrice",
          "retailPrice",
          "isNew",
          "isHot",
          "isOnSale",
          "listPicUrl",
          "gallery",
          "brief",
          "detail",
          "picUrl",
          "goodsUnit",
          "keywords",
          "categoryId",
          "brandId",
        ];
        excel.export_json_to_excel2(tHeader, this.list, filterVal, "商品信息");
        this.downloadLoading = false;
      });
    },
    resetQuery() {
      this.listQuery = {
        page: 1,
        limit: 20,
        goodsSn: undefined,
        name: undefined,
        categoryId: undefined,
        isNew: undefined,
        isHot: undefined,
        isOnSale: undefined,
        sort: "add_time",
        order: "desc",
      };
      this.getList();
    },
  },
};
</script>
